<!DOCTYPE html>
<html lang="en">
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .list_lh {
            height: 100%;
            overflow: hidden;
        }

        .list_lh * {
            margin: 0;
            padding: 0
        }

        .list_lh li, .list_lh_header p {
            padding: 5px;
        }

        .list_lh li p, .list_lh_header p {
            height: 24px;
            line-height: 24px;
            display: flex;
            color: #333;
            font-weight: 700;
        }

        .list_lh li p > span:nth-of-type(2), .list_lh_header p > span:nth-of-type(2) {
            flex: 2;
            /*ellipsis;*/
            overflow: hidden;
            white-space: nowrap;
        }

        .list_lh li p > span:nth-of-type(1), .list_lh_header p > span:nth-of-type(1) {
            flex: 2;
            width: 180px;
            /*ellipsis;*/
            overflow: hidden;
            white-space: nowrap;
        }

        .list_lh li p > span:nth-of-type(3), .list_lh_header p > span:nth-of-type(3) {
            width: 120px;
        }

        .list_lh li p em {
            width: 80px;
            font: normal 12px/24px Arial;
            color: #FF3300;
            float: right;
            display: inline-block;
        }

        .list_lh li p span {
            float: right;
            color: #e54d42;
            font-weight: 700;
        }

        .list_lh_header p span {
            text-align: left;
        }

        .list_lh li p a.btn_lh {
            background: #28BD19;
            height: 17px;
            line-height: 17px;
            color: #333;
            padding: 0 5px;
            margin-top: 4px;
            display: inline-block;
            float: right;
        }

        .page {
            width: 100%;
            height: 100%;
        }

        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0 0 0;
        }

        .toolbtn {
            position: absolute;
            top: 30px;
            left: 50px;
            z-index: 99;
        }

        .tooltipDiv {
            position: absolute;
            top: 100px;
            left: 50px;
            z-index: 99;
        }

        .square {
            border: 1px solid #fff;
            margin-top: 10px;
            font-size: 15px;
        }

        .anchorBL {
            display: none;
        }

        .line_div {
            position: fixed;
            /*width: 200px;*/
            z-index: 999;
            height: 30px !important;
            margin-top: 10px;
        }

        .notice_div {
            position: fixed;
            z-index: 999;
            right: 20px;
            top: 40px;
        }

        .alarm_div {
            position: fixed;
            z-index: 999;
            right: 20px;
            bottom: 20px;
            width: 500px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div :style="{height:(height)+'px'}" class="line_div">
        <!--        <el-menu class="el-menu-vertical-demo" @select="handleSelect" default-active="0">-->
        <!--            <el-menu-item index="0">-->
        <!--                <i class="el-icon-news"></i>-->
        <!--                <span slot="title">全部</span>-->
        <!--            </el-menu-item>-->
        <!--            <el-menu-item v-for="(item, index) in line_List" :index="index+1">-->
        <!--                <i class="el-icon-news"></i>-->
        <!--                <span slot="title">{{item.line_name}}</span>-->
        <!--            </el-menu-item>-->
        <!--        </el-menu>-->

        <el-form :model="form" ref="form" :inline="true" label-width="155px">
            <el-form-item label="企业名称:" prop="projectName">
                <el-input v-model="form.projectName" autocomplete="off"></el-input>
            </el-form-item>
            <!--            <el-form-item label="省:" prop="local" :rules="[-->
            <!--                             {required:true,message:'省不能为空!',trigger:'blur'}]">-->
            <!--                &lt;!&ndash;<el-cascader :options="options" v-model="form.local" @change="handleChange" style="width: 202px">-->
            <!--                </el-cascader>&ndash;&gt;-->
            <!--                <el-select v-model="form.province" @change="provinceChange" style="width:202px">-->
            <!--                    <el-option v-for="item in provinceArr"-->
            <!--                               :key="item.id"-->
            <!--                               :label="item.name"-->
            <!--                               :value="item.name">-->
            <!--                    </el-option>-->
            <!--                </el-select>-->
            <!--                &lt;!&ndash;<div v-if="editMod">原省市区:{{form.locals}}</div>&ndash;&gt;-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="市:" prop="local" :rules="[-->
            <!--                             {required:true,message:'市不能为空!',trigger:'blur'}]">-->
            <!--                <el-select v-model="form.city" @change="cityChange" style="width:202px">-->
            <!--                    <el-option v-for="item in cityArr" :key="item.id" :label="item.name" :value="item.name">-->
            <!--                    </el-option>-->
            <!--                </el-select>-->
            <!--            </el-form-item>-->

            <el-form-item label="区:" prop="local">
                <el-select v-model="form.zone" @change="zoneChange" style="width:202px">
                    <el-option v-for="item in zoneArr" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form>
        <!--        <el-pagination @current-change="handleCurrentChange" :current-page="param.pageno" small-->
        <!--                       :page-size="param.pagesize"-->
        <!--                       layout="total, prev, pager, next" :total="param.total">-->
        <!--        </el-pagination>-->
    </div>
    <!--    <div class="notice_div">-->
    <!--        <el-button type="danger" size="small" style=" animation: twinkling 2s 3 ease-in-out forwards;"-->
    <!--                   icon="el-icon-info"-->
    <!--                   circle v-if="errorList.length!=0" @click="dlgAlarmVisible=true"></el-button>-->
    <!--        <el-button type="primary" v-if="flag" @click="handleNotice">消音</el-button>-->
    <!--        <el-button type="primary" v-if="!flag" @click="handleNotice">开启</el-button>-->
    <!--    </div>-->
    <div class="alarm_div" style="height: 180px;">
        <div class="list_lh_header">
            <p style="border-bottom:2px solid rgba(23,40,90,0.8)">
                <span>企业名称</span><span>巡检任务总数</span><span>完成率%</span>
            </p>
        </div>
        <div class="list_lh notice" style="height: 80%">
            <ul id="notice">
            </ul>
        </div>
    </div>
    <div id="allmap" :style="{height:(height)+'px'}">
    </div>
    <el-dialog title="风险管控清单" :visible.sync="taskDataVisible">
        <el-table :data="taskData" :stripe="true" :border="true" size="mini" style="margin-bottom: 30px;">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="riskName" label="风险点名称" width="150"></el-table-column>
            <el-table-column prop="grade" label="风险等级" width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.grade==1">
                        <img src="../../../imgs/onelevel.png">
                    </div>
                    <div v-if="scope.row.grade==2">
                        <img src="../../../imgs/twolevel.png">
                    </div>
                    <div v-if="scope.row.grade==3">
                        <img src="../../../imgs/threelevel.png">
                    </div>
                    <div v-if="scope.row.grade==4">
                        <img src="../../../imgs/fourlevel.png">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="巡检人员" width="150"></el-table-column>
            <el-table-column prop="cycle" label="巡检周期">
                <template slot-scope="scope">
                    <el-tag>每{{scope.row.cycle}}{{typeJson[scope.row.cycleType]}}一次</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-footer" style="margin-top: 20px">
            <el-pagination background layout="prev, pager, next" :pagesize="tpageSize" :total="ttotalCount"
                           :current-page.sync="tcurrentPage" @current-change="tonChangePage">
            </el-pagination>
        </div>
    </el-dialog>

    <el-dialog title="风险管控清单" :visible.sync="dlgAlarmVisible">
        <el-table :data="rtaskData" :stripe="true" :border="true" size="mini" style="margin-bottom: 30px;">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="riskName" label="风险点名称"></el-table-column>
            <el-table-column prop="grade" label="风险等级">
                <template slot-scope="scope">
                    <div v-if="scope.row.grade==1">
                        <img src="../../../imgs/onelevel.png">
                    </div>
                    <div v-if="scope.row.grade==2">
                        <img src="../../../imgs/twolevel.png">
                    </div>
                    <div v-if="scope.row.grade==3">
                        <img src="../../../imgs/threelevel.png">
                    </div>
                    <div v-if="scope.row.grade==4">
                        <img src="../../../imgs/fourlevel.png">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="title" label="风险内容"></el-table-column>
            <el-table-column prop="reason" label="危害因素"></el-table-column>
            <el-table-column prop="damageType" label="可能导致的事故"></el-table-column>
            <el-table-column prop="scope" label="影响范围">
                <template slot-scope="scope">
                    <div v-if="scope.row.scope==0">
                        本厂
                    </div>
                    <div v-if="scope.row.scope==1">
                        作业场所
                    </div>
                    <div v-if="scope.row.scope==2">
                        设备
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="damage" label="潜在后果"></el-table-column>
        </el-table>
        <div class="page-footer" style="margin-top: 20px">
            <el-pagination background layout="prev, pager, next" :pagesize="rpageSize" :total="rtotalCount"
                           :current-page.sync="rcurrentPage" @current-change="ronChangePage">
            </el-pagination>
        </div>
    </el-dialog>

    <div id="audioDiv" style="height:30px;width:30px;display: none"></div>
</div>


<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
<!--加载鼠标绘制工具-->

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script type="text/javascript" src="../user-visual/js/scroll.js"></script>
<script>


    let vuePage = new Vue({
            el: '#page-monitor',
            data: {
                provinceArr: [],
                cityArr: [],
                zoneArr: [],
                form: {
                    projectName: '',
                    country: '中国',
                    province: '',
                    city: '',
                    zone: '',
                },
                height: 500,
                overlays: [], //marker 数组
                map: null, //地图
                centerDialogVisible: false,
                taskDataVisible: false,
                searchForm: {},
                zoneList: {},
                selMarker: {}, //选择marker
                dataJson: {}, //存数据
                labelJson: {}, //存标签
                detailVisible: false,
                dlgAlarmVisible: false,
                equipmentType: ['用电', '用水', '烟感', '手提式灭火器', '摄像头', '其他'],
                iconType: ['el_', 'water_', 'smoke_', 'handleFire', 'video', 'other'],
                device: '',
                paramData: '',
                sel_dev: '',
                param: {
                    pagesize: 50,
                    pageno: 1,
                    total: 10,
                },
                line_List: [],
                flag: true,
                time1: null,
                errorList: [],
                taskData: [],
                tpageSize: 10,
                ttotalCount: 0,
                tcurrentPage: 1,
                checkprojectNo: '',
                typeJson: {
                    0: '分',
                    1: '时',
                    2: '天',
                    3: '周',
                    4: '月',
                    5: '年',
                },
                dlgAlarmVisible: false,
                rtaskData: [],
                rcheckprojectNo: '',
                rpageSize: 10,
                rtotalCount: 0,
                rcurrentPage: 1,

            },
            created: function () {
                // HttpUtil.get('Zone/Child', {parentName: '中国', level: 'province'}).success((res) => {
                //     this.provinceArr = res.data;
                // })
                this.loadData();

            },
            methods: {
                sendurgent: function (phone, manager) {
                    var param = {};
                    param.UserId = SiteConfig.account.id;
                    param.phone = phone;
                    param.manager = manager;
                    param.wf_eventName = SiteConfig.account.userName + "催巡";
                    param.wf_eventMsg = "加紧巡查";
                    HttpUtil.get('GovStatistics/urgent', param).success((res) => {
                        if (res.state == 0) {
                            this.$message({
                                message: '催办成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.errMsg,
                                type: 'warning'
                            })
                        }
                    });
                },
                getRiskList: function (projectNo) {
                    var param = {};
                    vuePage.rcheckprojectNo = projectNo;
                    param.projectNo = vuePage.rcheckprojectNo;
                    param.pagesize = vuePage.rpageSize;
                    param.pageno = vuePage.rcurrentPage;
                    HttpUtil.get('GovStatistics/RiskList', param).success((res) => {
                        vuePage.dlgAlarmVisible = true;
                        vuePage.rtaskData = res.data;
                        vuePage.rtotalCount = res.total;
                    });
                },
                getTaskList: function (projectNo) {
                    var param = {};
                    vuePage.checkprojectNo = projectNo;
                    param.projectNo = vuePage.checkprojectNo;
                    param.pagesize = vuePage.tpageSize;
                    param.pageno = vuePage.tcurrentPage;
                    HttpUtil.get('Risk/taskList', param).success((res) => {
                        vuePage.taskDataVisible = true;
                        vuePage.taskData = res.data;
                        vuePage.ttotalCount = res.total;
                    })
                }
                ,
                ronChangePage: function (page) {
                    this.rcurrentPage = page;
                    getRiskList(this.rcheckprojectNo);
                }
                ,
                tonChangePage: function (page) {
                    this.tcurrentPage = page;
                    getTaskList(this.checkprojectNo);
                }
                ,
                search: function () {
                    vuePage.showDetail(vuePage.form.zone, vuePage.form.projectName);
                }
                ,
                showDetail(zone, projectName) {
                    if (zone) {
                        var param = {};
                        param.zone = zone;
                        if (projectName)
                            param.projectName = projectName;
                        param.pageno = 1;
                        param.pagesize = 1000;
                        HttpUtil.get('GovStatistics/getZoneByBusinessRisk', param).success((res) => {
                            if (res.data.length > 0) {
                                vuePage.DetailData = res.data;
                                var param = {};
                                if (projectName)
                                    param.projectName = projectName;
                                param.UserId = SiteConfig.account.id;
                                param.zone = zone;
                                param.pageno = 1;
                                param.pagesize = 1000;

                                HttpUtil.get('GovStatistics/getBusinessRiskPercent', param).success((res) => {
                                    this.device = res.data;
                                    for (var i = 0; i < res.data.length; i++) {
                                        if (vuePage.DetailData[i].projectName == res.data[i].projectName) {
                                            $.extend(vuePage.DetailData[i], res.data[i]);
                                        }
                                    }
                                    // vuePage.DtotalCount = res.total;
                                    vuePage.MapCreated();
                                    $('#notice').empty();
                                    $('.notice li:even').addClass('lieven');
                                    $("div .notice").myScroll({
                                        speed: 60, //数值越大，速度越慢
                                        rowHeight: 60 //li的高度
                                    });
                                    for (let item of vuePage.DetailData) {
                                        $('#notice').append('<li><p><span>' + item.projectName + '</span><span>' + item.total + '</span> <span>' + item.finishedrate + '</span></p></li>')
                                    }
                                })
                            } else {
                                $('#notice').append('<li><p><span>无企业</span><span>无风险点</span></p></li>')
                                this.$message({
                                    type: 'info',
                                    message: '未有企业信息！'
                                });
                            }
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '未有企业信息！'
                        });
                    }
                }
                ,
                loadData: function () {
                    var param = {};
                    param.UserId = SiteConfig.account.id;
                    param.pageno = this.pageno;
                    param.pagesize = this.pagesize;
                    HttpUtil.get('GovStatistics/getGovCheckRiskByZone', param).success((res) => {
                        // vuePage.tableData = res.data;
                        // vuePage.totalCount = res.total;
                        // vuePage.totalCount = res.total;
                        for (var i = 0; i < res.data.length; i++) {
                            vuePage.zoneArr.push(res.data[i].zone)
                        }
                        vuePage.form.zone = res.data[0].zone;
                        vuePage.showDetail(vuePage.form.zone);
                    });
                }
                ,
                zoneChange(value) {
                    console.log(this.form.zone);
                    vuePage.showDetail(vuePage.form.zone);
                }
                ,
                makeSure: function (row) {
                    let processparam = {
                        Id: row.Id,
                        reason: '已确认',
                        memo: '已确认',
                        user: SiteConfig.account.userName,
                        time: TimeUtil.convertToString(new Date()).substr(0, 10),
                        LogDate: row.LogDate,
                    }
                    HttpUtil.get('Error/Process', processparam).success(data => {
                        if (data.state == 0) {
                            this.$message({
                                message: '确认成功！',
                                type: 'success'
                            });
                            this.getError();
                        } else {
                            this.$message({
                                message: data.errMsg,
                                type: 'warning'
                            })
                        }
                    })
                }
                ,
                MapCreated() {
                    this.map = null;
                    let map = new BMap.Map('allmap');
                    // map.setMapStyle(SiteConfig.mapStyle)
                    let center_locat = this.convertGCJ02ToBD09(this.DetailData[0].lng, this.DetailData[0].lat);
                    map.centerAndZoom(new BMap.Point(center_locat.lng, center_locat.lat), 24);
                    map.enableScrollWheelZoom();
                    map.addControl(new BMap.MapTypeControl());
                    this.map = map;
                    var bdary = new BMap.Boundary();
                    bdary.get(this.DetailData[0].zone, function (rs) {       //获取行政区域
                        // map.clearOverlays();        //清除地图覆盖物
                        var count = rs.boundaries.length; //行政区域的点有多少个
                        if (count === 0) {
                            this.$message({
                                message: "未能获取当前输入行政区域",
                                type: 'warning'
                            })
                            return;
                        }
                        var pointArray = [];
                        for (var i = 0; i < count; i++) {
                            var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                            map.addOverlay(ply);  //添加覆盖物
                            pointArray = pointArray.concat(ply.getPath());
                        }
                        map.setViewport(pointArray);    //调整视野

                    });
                    /**
                     * 标点 -1无监测设备0离线1正常2电压故障3其他故障
                     */
                    // this.DetailData.sort(this.keysrt('seqno', false, parseInt))
                    for (let i = 0; i < this.DetailData.length; i++) {
                        let temp_locat = this.convertGCJ02ToBD09(this.DetailData[i].lng, this.DetailData[i].lat);
                        this.DetailData[i].lng = temp_locat.lng;
                        this.DetailData[i].lat = temp_locat.lat;
                        let stroke_color = '#39b54a';
                        let myIcon = new BMap.Icon(this.DetailData[i].finishedrate > 80 ? "../../../imgs/marker-alarm0.png" : this.DetailData[i].finishedrate >= 50 ? "../../../imgs/marker-alarm1.png" : "../../../imgs/marker-alarm2.png", new BMap.Size(45, 45));
                        let label = new BMap.Label(this.DetailData[i].projectName, {
                            offset: new BMap.Size(20, -10)
                        });
                        let marker = new BMap.Marker(new BMap.Point(this.DetailData[i].lng, this.DetailData[i].lat), {
                            icon: myIcon
                        });
                        marker.setLabel(label);
                        map.addOverlay(marker);
                        marker.setAnimation(this.DetailData[i].finishedrate < 50 ? BMAP_ANIMATION_BOUNCE : BMAP_ANIMATION_DROP); //跳动的动
                        let self = this;
                        marker.addEventListener("click", function () {
                            vuePage.sel_dev = self.DetailData[i];
                            let sContent =
                                // "<div style='margin:0 0 5px 0;padding:0.2em 0'>" + self.DetailData[i].projectName +
                                // "<button onclick='showDetail()' style='float: right'>查看数据</button>" +
                                // "</div>" +
                                "<h3>基本信息<h3 />" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>企业名称：" + self.DetailData[i].projectName + "</p>" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>企业地址：" + self.DetailData[i].province + self.DetailData[i].city + self.DetailData[i].zone + self.DetailData[i].address + "</p>" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>联系姓名：" + self.DetailData[i].manager + "</p>" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>联系电话：" + self.DetailData[i].phone + "</p>" +
                                "<hr />" +
                                "<h3>安全风险管控信息(已管控)<h3 />" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>风险清单风险点总数:" + (self.DetailData[i].one + self.DetailData[i].two + self.DetailData[i].three + self.DetailData[i].four) + "处</p>" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>【Ⅰ级:" + self.DetailData[i].one + "处;Ⅱ级:" + self.DetailData[i].two + "处;Ⅲ级:" + self.DetailData[i].three + "处;Ⅳ级:" + self.DetailData[i].four + "处;】</p>" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>任务总数" + self.DetailData[i].total + ",未完成数" + self.DetailData[i].finish + ",完成数" + self.DetailData[i].finished + ",超时数" + self.DetailData[i].finish_timeout + ",完成率" + self.DetailData[i].finishedrate + "%</p>" +
                                "<p><button onclick='sendurgent(&quot;" + self.DetailData[i].phone + "&quot;,&quot;" + self.DetailData[i].manager + "&quot;)' style='float: right;background:red;color:white'>催办</button></p></br></br>" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>风险责任清单：<button onclick='getTaskList(&quot;" + self.DetailData[i].projectNo + "&quot;)' style='float: right'>查看数据</button></p></br>" +
                                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>风险管控清单：<button onclick='getRiskList(&quot;" + self.DetailData[i].projectNo + "&quot;)' style='float: right'>查看数据</button></p>";
                            let infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
                            this.openInfoWindow(infoWindow);
                        });
                    }
                },
                // 排序方法
                keysrt(filed, rev, primer) {
                    rev = (rev) ? -1 : 1;
                    return function (a, b) {
                        a = a[filed];
                        b = b[filed];
                        if (typeof (primer) != 'undefined') {
                            a = primer(a);
                            b = primer(b);
                        }
                        if (a < b) {
                            return rev * -1;
                        }
                        if (a > b) {
                            return rev * 1;
                        }
                        return 1;
                    }
                }
                ,
                convertGCJ02ToBD09(lng1, lat1) {
                    let xpi = Math.PI * 3000.0 / 180.0;
                    let z = Math.sqrt(lng1 * lng1 + lat1 * lat1) + 0.00002 * Math.sin(lat1 * xpi);
                    let theta = Math.atan2(lat1, lng1) + 0.000003 * Math.cos(lng1 * xpi);
                    let lng = z * Math.cos(theta) + 0.0065;
                    let lat = z * Math.sin(theta) + 0.006
                    return {
                        lng: lng,
                        lat: lat,

                    }
                }
                ,

                getLine() {
                    this.param.line_projectno = SiteConfig.account.projectNo;
                    HttpUtil.get('HighWayLine/List', this.param).success((res) => {
                        this.line_List = res.data;
                        this.param.total = res.total;
                        this.handleSelect(0);
                    })
                }
                ,
                handleCurrentChange(page) {
                    this.param.pageno = page;
                    this.getLine();
                }
                ,
                handleSelect(key) {
                    let param = {}
                    if (key != 0) {
                        param = {
                            line_id: this.line_List[key - 1].line_id
                        }
                    }
                    clearInterval(this.time1);
                    HttpUtil.get('HighWayLine/deviceList', param).success((res) => {
                        this.devices = res.data;
                        if (key == 0) {

                            this.MapAllCreated();


                        } else {

                            this.MapCreated();

                        }
                        if (this.errorList.length > 0) {
                            this.dlgAlarmVisible = true;
                        }
                        this.time1 = setInterval(() => {
                            this.handleSelect(key)
                            if (this.errorList.length > 0) {
                                this.dlgAlarmVisible = true;
                            }
                        }, 30000)
                    })
                }
                ,
                handleNotice() {
                    if (!this.flag) {
                        this.getError();
                    } else {
                        $('#audioDiv').empty();
                    }
                    this.flag = !this.flag;
                }
                ,
            },
            watch: {}
            ,
            mounted: function () {
                $('.notice li:even').addClass('lieven');
                $("div .notice").myScroll({
                    speed: 60, //数值越大，速度越慢
                    rowHeight: 60 //li的高度
                });
                this.height = window.innerHeight;

            }
        })
    ;

    function sendurgent(phone, manager) {
        vuePage.sendurgent(phone, manager);
    }

    function getRiskList(projectNo) {
        vuePage.getRiskList(projectNo);
    }

    function getTaskList(projectNo) {
        vuePage.getTaskList(projectNo);
    }

    // function showDetail() {
    //     vuePage.getDeviceData();
    // }
</script>
</body>
</html>
